<template>
  <div class="gzmanage"  style="padding:15px;  background: #fff; box-shadow: 0 0 3px #ccc;">
    <div style="display: inline;" class="gzForm">
      <el-form :inline="true" class="demo-form-inline" >
        <!--<el-form-item label="制作厂家">-->
          <!--<el-select-->
            <!--multiple-->
            <!--collapse-tags-->
            <!--clearable-->
            <!--v-model="queryForm.producerList" filterable placeholder="请选择">-->
            <!--<el-option-->
              <!--v-for="(item,index) in produceNameList"-->
              <!--:key="index"-->
              <!--:label="item|filterText"-->
              <!--:value="item">-->
            <!--</el-option>-->
          <!--</el-select>-->
        <!--</el-form-item>-->
        <el-form-item label="" class="input_large">
          <el-input  placeholder="图号" v-model="queryForm.produceCode"></el-input>
        </el-form-item>
        <el-form-item label="" class="input_large">
          <el-input  placeholder="产品名称" v-model="queryForm.productName"></el-input>
        </el-form-item>
        <el-form-item label="" class="input_large">
          <el-input  placeholder="车型" v-model="queryForm.carType"></el-input>
        </el-form-item>
        <el-form-item label="" class="input_large">
          <el-input  placeholder="工装编号" v-model="queryForm.gzCode"></el-input>
        </el-form-item>
        <!--<el-form-item label="工段">-->
          <!--<el-select  multiple-->
                      <!--collapse-tags-->
                      <!--clearable v-model="queryForm.gqIdList" filterable placeholder="请选择">-->
            <!--<el-option-->
              <!--v-for="item in gongquList"-->
              <!--:key="item.id"-->
              <!--:label="item.gqName|filterText"-->
              <!--:value="item.id">-->
            <!--</el-option>-->
          <!--</el-select>-->
        <!--</el-form-item>-->
        <el-form-item>
          <el-button type="primary" class="search"  @click="getGzDetailList">查 询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="manage-add">
        <div class="add_new" v-if="hasRole('gz:gz:add')" @click="addGz">
            <span><i class="fa fa-plus" aria-hidden="true"></i> 新建工装</span>
        </div>
        <div class="add_new add_new_img download" v-show="tableData.length > 0" @click="exportWbLog">
            <!--<img src="../../../assets/images/exportGz.png" style="cursor: pointer;width: 30px;" title="导出保养计划" @click="exportWbLog"/>-->
            <img src="@/assets/images/daochu.png"/>
            <span class="con_txt"> 导出计划 </span>
        </div>
    </div>

    <!--<div style="display: inline;float: right;margin-top: -40px" class="add add_zl" v-if="hasRole('gz:gz:add')">
      <span @click="addGz"
            style="cursor: pointer !important;background-color: #F2A221;border-radius: 5px;color: white;padding-top: 4px;padding-bottom: 1px;padding-left: 5px;padding-right: 44px;display: inline-block;font-size: 15px;">
        <img src="../../../assets/images/plus.png" style="cursor: pointer;width: 50%"/>
        <label style="display: inline-block;cursor: pointer;position: absolute;margin-top: 4px"> 新建工装</label>
      </span>
    </div>-->

    <wh-table :height="600" :tableData="tableData" :tableLoading="tableLoading" :tableHeader="tableHeader" :option="option" style="margin-top: 5px">
      <template slot-scope="props" slot="operate">
        <div >
        	<span class="caozuo_span">
          	<a v-show="props.rowData.gzStatus !='6' &&props.rowData.gzStatus !='7'  &&props.rowData.gzStatus !='10' && hasRole('gz:gz:edit')" @click="editGzDetail(props.rowData)">编辑</a>
        	</span>
					<span class="caozuo_span">
          	<a v-show="props.rowData.gzStatus !='6'&&props.rowData.gzStatus !='10'  && hasRole('gz:gz:dump')"  @click="abortGz(props.rowData)">报废</a>
        	</span>
					<span class="caozuo_span">
          	<a v-show="props.rowData.gzStatus =='6' &&props.rowData.gzStatus !='7' &&props.rowData.gzStatus !='10'" style="cursor: default;color:#AAAAAA;cursor: not-allowed;">报废中</a>
        	</span>
        	<span class="caozuo_span">
          	<a @click="printGz(props.rowData)">打印</a>
        	</span>
        	<span class="caozuo_span">
          	<a @click="deleteGz(props.rowData)" v-if=" hasRole('gz:gz:delete')">删除</a>
        	</span>
          <!--<a  v-show="props.rowData.gzStatus !='7' &&props.rowData.gzStatus !='6' &&props.rowData.gzStatus !='10' && hasRole('gz:gz:stop')"  @click="stopGz(props.rowData,'7')"><span style="color: red" >停用</span></a>-->
          <!--<a  v-show="props.rowData.gzStatus =='7' &&props.rowData.gzStatus !='6' &&props.rowData.gzStatus !='10' && hasRole('gz:gz:reverse')"  @click="stopGz(props.rowData,props.rowData.preStatus)"><span style="color: red" >恢复</span></a>-->
        </div>
      </template>
    </wh-table>

    <div style="margin-top: 20px;margin-right: calc(45%)">
      <el-upload v-show="batchImport"
        class=" fileselect"
        style="text-align: right"
        action="/autoMonitor/gz/insertBatchGongZhuang"
        ref="fileUpload"
        :auto-upload="true">
        <el-button type="primary" class="buttonAdd">批量导入工装</el-button>
      </el-upload>
    </div>
    <form action="/autoMonitor/by/exportExcelData"  method="post"
          style="display: none;" ref="downWbLoadExcel">
      <input name="json" :value="templateExcel.json"/>
      <input name="type" value="1"/>
      <input name="title" value="工装维保记录数据表"/>
    </form>

    <edit-gz :data-detail="dataDetail" :allGzList="tableData" :type="type" :kuweiMapResult="copyKuwei"></edit-gz>
    <BfEdit :row-data="bfData"></BfEdit>
  </div>
</template>
<script>
  import whTable from "../../../components/wh-table/index";
  import editGz from "./editGz.vue";
  import BfEdit from "./BfEdit.vue";
  export default {
    name:'manage',
    data(){
      return{
        tableData: [],
        tableHeader:[],
        tableLoading:true,
        option:{showOperate:false,headerCell:{background:'rgb(214, 215, 216)',color:'rgba(0, 0, 0, 0.8)'}},
        dataDetail:{},
        type:"",
        queryForm:{producerList:[],gqIdList:[],carType:"",productName:"",produceCode:"",gzCode:""},
        produceNameList:[],
        gongquList:[],
        bfData:{},
        batchImport:false,

        kuweiMapResult:[],
        copyKuwei:[],

        templateExcel:{json:""},
        wbDicList:[],
        exportTableData: [],
        exportTableHeader:[{"columnName": "produceCode", "coloumNameCn": "产品图号"},
          {"columnName": "productName", "coloumNameCn": "产品名称"},
          {"columnName": "carType", "coloumNameCn": "车型"},
          {"columnName": "gzCode", "coloumNameCn": "工装编码"},
          {"columnName": "gzName", "coloumNameCn": "工装名称"},
          {"columnName": "gzCount", "coloumNameCn": "数量"},
          {"columnName": "", "coloumNameCn": "维护保养项目","children":[]},
          {"columnName": "produceDate", "coloumNameCn": "保养日期"},
          {"columnName": "repairMan", "coloumNameCn": "保养当但"},
          {"columnName": "wbRemark", "coloumNameCn": "备注"},
         ],
      }
    },
    components:{
      whTable,
      editGz,
      BfEdit
    },
    filters:{
      filterText(val){
         if(val && val.length >8){
           return val.substring(0,7)+"..."
         }
         return val;
      }
    },
    mounted(){
      let self = this;
      self.getProduceName();
      self.getGongQu();
      self.getGzDetailList();
      self.getKuWei();
      self.getDicList();
      self.batchImport = this.$route.query.batchImport;
      self.$eventBus.$on("updateGongzhuang",function (type) {
        self.queryForm.productName="";
        self.queryForm.producerList=[];
        self.queryForm.produceCode="";
        self.queryForm.gqIdList=[];
        self.queryForm.carType="";
        self.queryForm.gzCode="";
        self.getGzDetailList();
        self.getKuWei();
      })
    },
    methods:{
      getDicList(){
        let self = this;
        self.$http({
          url: "/autoMonitor/repair/queryWbDicList",
          method: "post",
        }).then(resp => {
          if (resp.success) {
            let condition = [];
            for(let data of resp.result){
              let _column =  {"columnName": data.id, "coloumNameCn": data.name};
              condition.push(_column)
            }
            self.exportTableHeader[6].children = condition;
            self.wbDicList = resp.result;
          }
        });
      },
      getKuWei() {
        let self = this;
        self.$http({
          url: "/autoMonitor/gz/queryGqAndGzAndGxAndPosition",
          method: "post",
        }).then(resp => {
          if (resp.success) {
            self.kuweiMapResult = resp.result;
          }
        });
      },
      handleDefaultTab(){
        let self = this;
        self.tableHeader =  [{"columnName": "gqName", "coloumNameCn": "工段"},
          {"columnName": "gzName", "coloumNameCn": "工装名称"},
          {"columnName": "gzCode", "coloumNameCn": "工装编码"},
          {"columnName": "produceCode", "coloumNameCn": "产品图号"},
          {"columnName": "carType", "coloumNameCn": "车型","width":75},
          {"columnName": "producer", "coloumNameCn": "制作厂家"},
          {"columnName": "productName", "coloumNameCn": "产品名称"},
          {"columnName": "produceDate", "coloumNameCn": "保养日期"},
          {"columnName": "maintainPeriod", "coloumNameCn": "保养周期","width":78},
          {"columnName": "gzStatus", "coloumNameCn": "工装状态","tag":true,"width":85},
          {"columnName": "useStatus", "coloumNameCn": "使用状态","tag":true}];
        self.option.showOperate = true;
      },
      getProduceName(){
        let self = this;
        self.$http({
          url: "/autoMonitor/gz/queryProducerName",
          method: "post",
        }).then(resp => {
          if (resp.success) {
            self.produceNameList = resp.result;
          }
        });
      },
      getGongQu() {
        let self = this;
        self.$http({
          url: "/autoMonitor/gd/queryGongDuanList",
          method: "post",
        }).then(resp => {
          if (resp.success) {
            self.gongquList = resp.result;
          }
        });
      },
      printGz(rowData){
        let self = this;
        self.$http({
          url: "/autoMonitor/print",
          method: "post",
          params:{name:"车型:"+rowData.carType,code:"编号:"+rowData.gzCode}
        }).then(resp => {

        });
      },
      addGz(){
        this.dataDetail = {
            id:"",
            gqName: "",
            gzName: "",
            gxName: "",
            kuWeiCode: "",
            gzCode: "",
            produceCode:"",
            productName:"",
            carType:"",
            producer:"",
            produceDate:"",
            maintainPeriod:"",
            userDept:"",
            tokenUser:"",
            ysName:"只允许JPG或PDF",
            codeName:"只允许JPG"
        };
        this.copyKuwei =  JSON.parse(JSON.stringify(this.kuweiMapResult));
        this.type = "add";
      },
      editGzDetail(rowData){
        rowData.ysName = !rowData.yanshouPath?"只允许JPG或PDF":rowData.yanshouPath;
        rowData.codeName = !rowData.qrcodePath?"只允许JPG":rowData.qrcodePath;
        let copyKuwei = JSON.parse(JSON.stringify(this.kuweiMapResult));
        for(let data of copyKuwei){
          let positionHousesList = data.positionHousesList;
          if(positionHousesList){
            for(let _p of positionHousesList){
              if(_p.code == rowData.kuWeiCode){
                _p.self = true;
                break;
              }
            }
          }
        }
        this.copyKuwei = copyKuwei;
        this.dataDetail = Object.assign({},rowData);
        this.type = "edit";
      },
      stopGz(rowData,status){
        let self = this;
        let param = {id:rowData.id,gzStatus:status};
        let msg = "恢复";
        if( status== '7'){
          param.preStatus = rowData.gzStatus;
          msg = "停用";
        }
        self.$confirm('确定'+msg+'该信息？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          self.$http({
            url: "/autoMonitor/gz/updateGongZhuangStatus",
            method: "post",
            params:param
          }).then(resp => {
            if (resp.success) {
              self.getGzDetailList();
              self.$notify({
                title: '提示',
                message: msg+"成功！",
                type: 'success'
              });
              return
            }
          });
        }).catch(() => {
          this.$message.info("已取消")             
        });
      },
      deleteGz(rowData){
        let self = this;
        let param = {id:rowData.id,status:"-1"};
        self.$confirm('确定删除该信息？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          self.$http({
            url: "/autoMonitor/gz/updateGongZhuangStatus",
            method: "post",
            params:param
          }).then(resp => {
            if (resp.success) {
              self.getGzDetailList();
              self.$notify({
                title: '提示',
                message: "删除成功！",
                type: 'success'
              });
              return
            }
          });
        }).catch(() => {
          this.$message.info("已取消")             
        });
      },
      abortGz(rowData){
        let self = this;
        self.bfData = {gzName:rowData.gzName,relateId:rowData.id,bfReason:"",type:"0",filePath:""};
      },
      exportWbLog(){
        let self = this;
        self.$http({
          url: "/autoMonitor/repair/queryGzAndWbDetail",
          method: "post",
          data: JSON.stringify(self.queryForm),
          dataType: 'json',
          contentType: "application/json",
        }).then(resp => {
          if (resp.success) {
            for(let data of resp.result){
              let wbDicList = data.wbDicList;
              if(!wbDicList){
                for(let dic of self.wbDicList){
                  data[dic.id] = "X";
                }
              }else{
                for(let dic of wbDicList){
                  data[dic.id] = dic.valueCn;
                }
              }
            }
            let headers = {tableHeader:this.exportTableHeader,tableData:resp.result};
            self.templateExcel.json = JSON.stringify(headers);
            self.$nextTick(()=>{
              self.$refs.downWbLoadExcel.submit();
            })
          }
        });
      },
      getGzDetailList(){
        let self = this;
        self.tableLoading = true;
        self.$http({
          url: "/autoMonitor/gz/queryGongZhuangDetail",
          method: "post",
          data: JSON.stringify(self.queryForm),
          dataType: 'json',
          contentType: "application/json",
        }).then(resp => {
          if (resp.success) {
            self.handleDefaultTab();
            self.tableData = resp.result;
            self.tableLoading = false;
          }
        });
      }
    }
  }
</script>
<style scoped>
  .gzmanage .el-form--inline .gzmanage .el-form-item{
    margin-right: 3px;
  }
  .gzmanage .el-select__tags-text{
    font-size: 11px;
  }
  .gzmanage .el-select__tags{
    max-width: none !important;
  }
  .gzmanage .el-date-editor.el-input, .userManage .el-date-editor.el-input__inner {
    width: auto;
  }
  .gzmanage .buttonAdd{
    float: right;
    margin-bottom: 10px;
    padding: 8px 16px;
    font-size: 14px;
    border-radius: 4px;
  }
  .gzForm .el-form-item{
    margin-bottom: 0px !important;
  }
  .gzForm .search {
    background: #34bfc6;
    border-color: #34bfc6;
  }
  .gzmanage .el-button--medium{
    padding: 5px 9px !important;
  }
  .add .el-button--medium{
    padding: 15px 30px !important;
  }
  .gzmanage .el-tag--small {
    height: 20px;
    padding: 0 4px;
    line-height: 17px;
  }
  .input_large .el-input__inner{
    padding: 0 5px;
  }
  .manage-add .add_new {
    float: left;
  	margin-right: 10px;
    margin-bottom: 15px;
  }
</style>
